<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
        <template #left>
            <l-panel style="padding-right:0;" >
                <template #title>
                    {{$t('字典分类')}}
                </template>
                <div class="l-rblock" style="padding-bottom:33px" >
                    <div class="l-rblock l-overflow-y">
                        <el-tree class="learun-tree" default-expand-all v-loading="treeLoading" :data="dataItemClassifysTree" :expand-on-click-node="false"  @node-click="handleNodeClick">
                            <span class="lr-tree-node"  slot-scope="{ node }">
                                {{ node.label }}
                            </span>
                        </el-tree>  
                    </div>
                    <div class="l-bottom" >
                        <el-input :placeholder="$t('请输入编码/名称')"  @keyup.enter.native="hanleSearchClassifys" v-model="searchClassifysWord" size="mini" >
                            <el-button @click="hanleSearchClassifys" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入编码/名称')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false"  >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table :key="columns.length" :columns="columns" :dataSource="searchTableData || tableData">
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog   
            :width="500"
            :height="columns.length * 48 + 88"
            :title="formTitle"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form"></my-form>
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.language.mapping
import MyForm from './form'

export default {
    components: {
        MyForm
    },
    props: {
    },
    data () {
        return {
            lr_isPage:true,
            //查询
            searchWord:'',
            searchTableData:null,

            treeLoading:false,
            treeData:null,
            searchClassifysWord:'',
            classifyCode:'',

            tableBtns:[
                {prop:'Edit',label:this.$t('编辑'),width:60}
            ],
            tableLoading:false,
            tableData:[],
            
            formTitle:'',
            formVisible:false,
            formEdit:false,
            formEditRow:null,
            tableKey:1
        };
    },
    computed:{
        dataItemList(){
            return this.lr_dataItem[this.classifyCode] || []
        },
        dataItemClassifysTree(){
            return this.$toTree(this.treeData || this.lr_dataItemClassifys,"f_ItemId","f_ParentId","f_ItemCode","f_ItemName")
        },

        typeList(){
            return this.$store.state.language.type.list
        },
        mainType(){
            return this.appConfig.language.mainType
        },
        columns(){
            const _columns = []
            this.typeList.forEach(item => {
                _columns.push({label:item.f_Name,prop:item.f_Code,minWidth:'120'})
            })
            return _columns
        }
    },
    mounted () {
        this.initTree()
    },
    methods:{
        async refreshTable(){
            this.searchWord = ''
            this.searchTableData = null
            this.tableLoading = true
            await this.lr_loadDataItem(this.classifyCode,false)
            await this.loadTableData()
            this.tableLoading = false
        },
        async loadTableData(){
            const _tableData = []
            const mappingDic = {}
            const mappingData =await this.$awaitWraper(api.getDataItemList(this.classifyCode))
            mappingData.forEach(row=>{
                mappingDic[row[this.mainType]] = row
            })
            this.dataItemList.forEach(item=>{
                if(mappingDic[item.f_ItemName]){
                    _tableData.push(mappingDic[item.f_ItemName])
                }
                else{
                    const _row = {}
                    _row[this.mainType] = item.f_ItemName
                    _tableData.push(_row)
                }
            })

            this.tableData = _tableData
        },

        async initTree(){
            this.treeLoading = true
            await this.lr_loadDataItemClassifys(false)
            this.treeLoading = false
        },
        hanleSearchClassifys(){
            if(this.searchClassifysWord){
                this.treeData = this.lr_dataItemClassifys.filter(item => item.f_ItemCode.indexOf(this.searchClassifysWord) >-1 || item.f_ItemName.indexOf(this.searchClassifysWord)>-1);
            }
            else{
                this.treeData = null
            }
        },
        handleNodeClick(data) {            
            this.classifyCode = data.f_ItemCode
            this.refreshTable()
        },

        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.tableData.filter(item => item[this.mainType].indexOf(this.searchWord) >-1)
            }
            else{
                this.searchTableData = null
            }
        },
        handleEdit($index,row){
            this.formEditRow = row
            this.showForm('编辑翻译')
        },
        handleSave(showLoading,hideLoading){
            if(this.$refs.form.validateForm()){
                const formData = this.$refs.form.getForm()
                showLoading()
                if(this.formEditRow.f_code){// 修改数据
                    api.update(this.formEditRow.f_code,formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.loadTableData()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(formData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.loadTableData()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            }    
        },
        handleOpenedForm(){
            this.$refs.form.setForm(this.$deepClone(this.formEditRow))
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }

}
</script>